<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项管理</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>📝 待办事项管理</h1>
            <p class="subtitle">管理你的日常任务，提高工作效率</p>
        </header>

        <main>
            <section class="input-section">
                <div class="input-group">
                    <input 
                        type="text" 
                        id="todoInput" 
                        placeholder="添加新的待办事项..." 
                        autocomplete="off"
                    >
                    <button id="addBtn" class="btn btn-primary">
                        <span>添加</span>
                    </button>
                </div>
            </section>

            <section class="stats-section">
                <div class="stats">
                    <div class="stat-item">
                        <span class="stat-number" id="totalCount">0</span>
                        <span class="stat-label">总计</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number" id="activeCount">0</span>
                        <span class="stat-label">未完成</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number" id="completedCount">0</span>
                        <span class="stat-label">已完成</span>
                    </div>
                </div>
            </section>

            <section class="todo-section">
                <div class="todo-header">
                    <h2>待办列表</h2>
                    <button id="clearCompletedBtn" class="btn btn-secondary" style="display: none;">
                        清除已完成
                    </button>
                </div>
                
                <div id="todoList" class="todo-list">
                    <div class="empty-state">
                        <div class="empty-icon">📋</div>
                        <p>暂无待办事项</p>
                        <p class="empty-subtitle">添加你的第一个任务开始吧！</p>
                    </div>
                </div>
            </section>
        </main>

        <footer>
            <p>数据自动保存到本地浏览器</p>
        </footer>
    </div>

    <script src="app.js"></script>
</body>
</html>
